<template>
  <div>
    <div id="user-info-box">
      <div class="time-box" v-if="utcDateTime.dateTime.length>0">
        『<span class="utc-name" v-text="utcDateTime.utcName"></span>』 <span v-text="utcDateTime.dateTime"></span>
      </div>
      <div class="box act-box">
        <el-dropdown trigger="click" @command="doEvent" size="small">
                      <span class="el-dropdown-link">
                        更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              icon="el-icon-plus"
              v-for="(value,key) in actMenuArr"
              :key="key" v-text="value.name"
              :command="value.event">
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="box show-item">
        帐号: <span v-text="CurrUser.Username"></span>
      </div>
      <div class="box show-item">
        角色: <span v-text="shopInfo.role.roleName"></span>
      </div>
      <div class="box show-item">
        店铺: <span v-text="shopInfo.name"></span>
      </div>
      <div class="box">
        <img :src="CurrUser.Icon" alt="" class="user-icon" @click="doEvent('loginInfo')">
      </div>
      <div class="c"></div>
    </div>
    <ChangePassword></ChangePassword>
    <LoginInfo></LoginInfo>
  </div>
</template>
<script>
import ChangePassword from '../User/ChangePassword'
import LoginInfo from '../User/LoginInfo'
import RoleTools from '../Tools/RoleTools'
// 头部组建
export default {
  name: 'TopBar',
  components: {ChangePassword, LoginInfo},
  data: function () {
    return {
      shopInfo:{
        name:'',
        logo:'',
        role:{
          id: "",
          name: ""
        },
      },
      utcDateTime: {
        dateTime: '',
        utcName: '北京时间'
      },
      // 快捷操作
      actMenuArr: [
        {
          name: '登录信息',
          event: 'loginInfo'
        },
        {
          name: '更改密码',
          event: 'changePassword'
        },
        // {
        //   name: '更新缓存',
        //   event: 'updateModuleData'
        // },
        {
          name: '联系平台',
          event: 'contactPlatform'
        },
        {
          name: '退出登录',
          event: 'loginOut'
        }
      ]
    }
  },
  mounted: function () {
    var $this = this
    this.bus.$on('UserInfoBusCall', function () {
      console.log('登录后,更新后台模块缓存')
      if ($this.CurrUser.IsLogin()) {
        // 登录后,更新后台模块缓存
        $this.reflushModuleCache(false)
      }
      $this.$forceUpdate()
    })

    // 更新当前显示时间
    setInterval(function () {
      $this.utcDateTime = $this.TimeTools.getDateTime()
      $this.$forceUpdate()
    }, 1000)

    if ($this.CurrUser.IsLogin()) {
      $this.getInfo()
    }
  },
  methods: {
    getInfo:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameShop+'Shop/info', {}, function (data) {
        $this.shopInfo=data
        RoleTools.cacheAction(data.role.actionArr)
        $this.bus.$emit('RoleActionChangeCallBus')
        $this.$forceUpdate()
      })
    },
    // 快捷操作事件处理
    doEvent: function (eventStr) {
      var $this = this
      // 更改密码
      if (eventStr === 'changePassword') {
        this.bus.$emit('ChangePasswordDialogShowBusCall')
      }
      // 登录信息查看
      if (eventStr === 'loginInfo') {
        this.bus.$emit('LoginInfoBusCall')
      }
      if (eventStr === 'contactPlatform') {
        $this.MyRequest($this.ApiDoNameShop+'Home/checkAndGetMessageSession', {
          toUserType:'SysUser',
          toMainId:0,
        }, function (data) {
          $this.$router.push({
            name:'ChatPage',
            query:{
              sessionId:data.id
            }
          })
          // console.log('data',data)
          // location.reload()
        },function () {
          // location.reload()
        })
        return
      }
      // 退出登录
      if (eventStr === 'loginOut') {

        $this.$confirm('您是否确认进行该操作?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $this.CurrUser.setCache(null)
          setTimeout(function () {
            location.reload()
          },1000)
          $this.MyRequest($this.ApiDoNameAuth+'User/loginOut', {}, function (data) {
            location.reload()
          },function () {
            location.reload()
          })
        }).catch(() => {

        })
      }

      // 更新模块缓存
      if (eventStr === 'updateModuleData') {
        this.reflushModuleCache(true)
      }
    },
    reflushModuleCache: function (isTip) {
      /*var $this = this
      $this.MyRequest('ModuleManager/tableField', {}, function (data) {
        if (isTip) {
          $this.tip('更新成功,2秒后自动刷新页面...')
        }
        $this.GlobalData.setCache('TableFieldData', data)
        setTimeout(function () {
          location.reload()
        }, 1500)
      })*/
    }
  }
}
</script>
<style>
#user-info-box {
  color: #FFFFFF;
  font-size: 12px;
  position: relative;
}

#user-info-box .el-dropdown {
  font-size: 12px;
  color: #FFFFFF;
  display: inline-block;
  line-height: normal;
}

#user-info-box .el-dropdown-menu__item {
  font-size: 12px;
}

#user-info-box .box {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  position: relative;
  top: 7px;
  float: right;
  margin-right: 5px;
}

#user-info-box .box.show-item span{
  display: inline-block;
  padding: 2px 5px;
  background: #7e7875;
  line-height: 20px;
  border-radius: 3px;
}

#user-info-box .box span {
}

.user-icon {
  height: 26px;
  position: relative;
  padding-right: 10px;
  cursor: pointer;
  top: 2px;
}

.user-icon:active {
  opacity: 0.9;
}

.act-box {
  width: 100px;
  text-align: center;
  color: #0086b3;
  cursor: pointer;
}

.act-box:active {
  opacity: 0.9;
}

#user-info-box .el-breadcrumb {
  font-size: 12px;
}

.time-box {
  float: left;
  height: 30px;
  margin: 7px;
  /*background: rgba(10, 10, 10, 0.8);*/
  border-radius: 3px;
  min-width: 200px;
  line-height: 30px;
  text-align: left;
  text-indent: 5px;
  color: #EEEEEE;
}

.time-box .utc-name {
  color: #f5cd5b;
}

#user-info-box .el-breadcrumb__separator[class*=icon] {
  margin: 0px;
}
</style>
